/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-pascal-case */
import React from 'react'

const UseState = () => {
	// useState => 第一个参数 状态 => this.state = {count:0} 第二个更新状态的函数
	const [count, setCount] = React.useState(0)

	const [width, setWidth] = React.useState(0)

	const [height, setHeight] = React.useState(0)

	const add = () => {
		// setCount => this.setState(count:count + 1)
		setCount(count + 1)
	}

	// 生命周期 => 更新时 类似于vue的监听watch函数
	React.useEffect(() => {
		// BOM的网页标题
		document.title = count
		console.log(document.title)
	}, [count])

	React.useEffect(() => {
		// 将hight的值变成whith的值
		setHeight(width)
		console.log(height)
	}, [width])

	const testadd = () => {
		setWidth(width + 100)
		console.log(width)
	}

	return (
		<>
			<div className="nav2">
				<h4>
					8.useState的使用(常用),state属性的使用,相当于vue里面的data
				</h4>
				<div
					style={{
						width: width,
						backgroundColor: 'red',
						height: height,
					}}
				></div>
				<h1>count的值：{count}</h1>
				<React.$vant.Button type="primary" onClick={add}>
					点我会自增
				</React.$vant.Button>
				<React.$vant.Button type="primary" onClick={testadd}>
					点我会自增
				</React.$vant.Button>
			</div>
		</>
	)
}

export default UseState
